<template>
  <div class="action-btn-wp">
    <el-button type="primary" size="small" @click.stop.prevent="openDialog()">填写收货地址</el-button>

    <el-dialog
        :visible.sync="dialogVisible"
        size="tiny"
        :close-on-click-modal="false"
        custom-class="small-body-dialog"
        >
      <span slot="title">
        <span style="font-weight: bold;font-size: 16px;">填写收货地址</span>
      </span>
      <div class="agree-service-dialog-wp">
        <div class="agree-hint">填写收货地址后将通知用户将商品寄回到以下地址进行退换货</div>
        <contact-select placeholder="请选择退换货地址" @select-contact="selectContact"></contact-select>
      </div>
      <footer slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="agreeService()" :loading="sending">确定提交</el-button>
      </footer>
    </el-dialog>

  </div>
</template>

<script>
  import ContactSelect from '@/components/ContactSelect';
  import {setServiceAddress} from '@/api/afterService';
  import {showMessage} from '@/utils/message';

  export default {
    name: 'actionServiceAddress', //售后通知用户的收货地址
    components:{
      'contact-select':ContactSelect,
    },
    props:{
      scope:{
        type:Object,
        default:()=>{},
      },
      scopeId:{
        type:String,
        default:'id'
      },
    },
    data()
    {
      return {
        dialogVisible:false,
        sending:false,
        contact:null,
      }
    },
    methods: {
      openDialog()
      {
         this.$store.dispatch('getContactList',{data:{pageNum:1,pageSize:999}}),
         this.dialogVisible = true;
      },
      agreeService()
      {
        if(!this.contact)
        {
          this.$message({
            message: '请选择退换货地址',
            type: 'error',
            duration: 3000
          });

          return;
        }

        if(this.sending)
        {
          return;
        }

        this.sending = true;

        let data = {
          serviceOrderId:this.scope.row.id,
          contactNumber:this.contact.phone,
          contactName:this.contact.name,
          address:this.contact.provice + this.contact.city + this.contact.regoin + this.contact.text,
        };

        setServiceAddress(data).then(()=>{
          let rows = this.scope.rows;
          let index = this.scope.index;
          rows.splice(index,1);

          showMessage({title:'设置退换货地址成功!',type:'success'});

          this.dialogVisible = false;
          this.sending = false;

          this.$emit('success');

        }).catch(err=>{

          this.sending = false;

        });

      },
      selectContact(contact) //回寄地址选择回调
      {
        this.contact = contact;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .agree-service-dialog-wp
  {
    .agree-hint
    {
      margin-bottom: 15px;
    }
  }
</style>